<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			html{
				font-size: 16px;
			}
			.box {
				width: 10rem;
				height: 10rem;
				background-color: red;
			}
			.text {
				color: #fff;
				font-size: 16px;		
			}
			/**
			 * 1rem =18px =(html的font-size);
			 * 
			 * */
		
			/*@media  screen and (max-width:360px) and (min-width:320px) {
				html{
					font-size: 24px;
				}
			}
			
			@media screen and (max-width:320px) {
				html{
					font-size: 20px;
				}
			}
			*/
			
			
			
		
		</style>
	
	
	
	</head>
	<body>
		<div class="box">
			<p class="text">
				hello rem
			</p>
		</div>
		
		<script type="text/javascript">
			//获取视窗宽度
			let htmlWidth=document.documentElement.clientWidth ||
							document.body.clientWidth;
			console.log(htmlWidth);
			
			let htmlDom=document.getElementsByTagName('html')[0];
			htmlDom.style.fontSize=htmlWidth/10+'px';
			
			console.log(htmlDom.style.fontSize)
			
			
			
		</script>
		
	</body>
</html>
